$(function () {

    if(document.getElementById("lineChart")){
        var lineData = {
            labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            datasets: [
                {
                    label: "Example dataset",
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: "Example dataset",
                    fillColor: "rgba(28,132,198,0.5)",
                    strokeColor: "rgba(28,132,198,0.7)",
                    pointColor: "rgba(28,132,198,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(28,132,198,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };

        var lineOptions = {
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            bezierCurve: true,
            bezierCurveTension: 0.4,
            pointDot: true,
            pointDotRadius: 4,
            pointDotStrokeWidth: 1,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,
            responsive: true,
        };

        var ctx = document.getElementById("lineChart").getContext("2d");
        var myNewChart = new Chart(ctx).Line(lineData, lineOptions);

        var lineData1 = {
            labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            datasets: [
                {
                    label: "Example dataset",
                    fillColor: "rgba(28,132,198,0.5)",
                    strokeColor: "rgba(28,132,198,0.7)",
                    pointColor: "rgba(28,132,198,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(28,132,198,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };

        var ctx = document.getElementById("totalSold").getContext("2d");
        var myNewChart = new Chart(ctx).Line(lineData1, lineOptions);

        var ctx = document.getElementById("perPurchase").getContext("2d");
        var myNewChart = new Chart(ctx).Line(lineData1, lineOptions);

        var barData = {
            labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: "My Second dataset",
                    fillColor: "rgba(28,132,198,0.5)",
                    strokeColor: "rgba(28,132,198,0.8)",
                    highlightFill: "rgba(28,132,198,0.75)",
                    highlightStroke: "rgba(28,132,198,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };

        var barOptions = {
            scaleBeginAtZero: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            barShowStroke: true,
            barStrokeWidth: 2,
            barValueSpacing: 5,
            barDatasetSpacing: 1,
            responsive: true,
        }


        var ctx = document.getElementById("barChart").getContext("2d");
        var myNewChart = new Chart(ctx).Bar(barData, barOptions);
    }

});